<template>
  <Modal
    v-model="dialogVisible"
    title="数据源配置"
    :loading="loading"
    @on-ok="asyncOK"
  >
    <Row>
        <Col span="12" style="padding-right:10px">
            <Select v-model="model11" filterable>
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </Col>
    </Row>
    <p>After you click ok, the dialog box will close in 2 seconds.</p>
  </Modal>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      loading: true,
      cityList: [
          {
              value: 'New York',
              label: 'New York'
          },
          {
              value: 'London',
              label: 'London'
          },
          {
              value: 'Sydney',
              label: 'Sydney'
          },
          {
              value: 'Ottawa',
              label: 'Ottawa'
          },
          {
              value: 'Paris',
              label: 'Paris'
          },
          {
              value: 'Canberra',
              label: 'Canberra'
          }
      ],
      model11: '',
    };
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
    }
  },
  methods: {
    asyncOK() {
      setTimeout(() => {
        this.dialogVisible = false;
      }, 2000);
    }
  }
};
</script>